/*eslint-disable*/
import React, { useState, useEffect } from 'react'
import { Icon } from 'react-vant';
import Footer from '../../components/Footer'
import { Search, Button } from 'react-vant';
import './hunting.css'
import { DropdownMenu } from 'react-vant';
import request from '../../utils/request';
import { Popup } from 'react-vant';

import { useHistory } from 'react-router-dom'

const hunting = (props) => {

    const RouterHistory = useHistory()

    console.log(useHistory, 'useHistory');

    const { history } = props

    console.log(history);

    const option1 = [
        // { text: '区域', value: 0 },
        // { text: '新款商品', value: 1 },
        // { text: '活动商品', value: 2 },
    ];

    const option2 = [
        { text: '不限', value: '不限' },
        { text: '整租', value: '整租' },
        { text: '合租', value: '合租' },
    ];

    const option3 = [
        { text: '不限', value: '不限' },
        { text: '1000及以下', value: '1000及以下' },
        { text: '1000-2000', value: '1000-2000' },
        { text: '2000-3000', value: '2000-3000' },
        { text: '3000-4000', value: '3000-4000' },
        { text: '4000-5000', value: '4000-5000' },
        { text: '5000-7000', value: '5000-7000' },
        { text: '7000及以上', value: '7000及以上' },
    ];


    const [value, setValue] = useState('');

    const [search, setSearch] = useState('');

    //列表接口
    const [hometab, setHome] = useState([])

    const [show, setShowPopup] = useState(false);

    useEffect(() => {
        homelist();
    }, [])

    //列表数据
    const homelist = async () => {
        request({
            url: "http://47.102.145.189:8009/houses?cityId=AREA%7C88cff55c-aaa4-e2e0&area=AREA%7C88cff55c-aaa4-e2e0&rentType=true&price=null&more=CHAR%7C76eb0532-8099-d1f4%2CFLOOR%7C1%2CAREA%7C88cff55c-aaa4-e2e0%2CORIEN%7C61e99445-e95e-7f37%2Ctrue&roomType=ROOM%7Cd1a00384-5801-d5cd&oriented=ORIEN%7C61e99445-e95e-7f37&characteristic=CHAR%7C76eb0532-8099-d1f4&floor=FLOOR%7C1&start=1&end=20",
            method: "get",
            params:{
                
            }
        }).then(res => {
            setHome([...res.data.body.list])
            // console.log(res);
        })
}

    const onSearch=async()=>{
        request({
            url:"",
            method:"post",
        })
    }


    const ok1 = () => {
        setShowPopup(false)
    }

    const ok2 = () => {
        setShowPopup(false)
    }
    const godetail = (houseCode) => {
        RouterHistory.push({
            pathname: `/detail:${houseCode}`,
            state: {
                houseCode: houseCode
            }
        })
    }

    const getmap=()=>{
        RouterHistory.push({
            pathname:"/map",
            state:{
                name:'地图找房'
            }
        })
    }

    return (
        <div className="hunting">
            <header className="z-header">
                <div><Icon name="arrow-left" /></div>
                <div>
                    <Search value={search} onChange={onSearch} placeholder="请输入搜索关键词" />
                </div>
                <div onClick={()=>{
                    getmap()
                }}>
                    地图
                </div>
            </header>

            <div className="z-tit">
                <div className="drop">
                    <DropdownMenu value={value} onChange={setValue}>
                        <DropdownMenu.Item placeholder="区域" name="value1" options={option1} />
                        <DropdownMenu.Item placeholder="方式" name="value2" options={option2} />
                        <DropdownMenu.Item placeholder="租金" name="value3" options={option3} />
                    </DropdownMenu>
                </div>
                <div className="btn4">
                    <Button type="default" className="shai" onClick={() => { setShowPopup(true) }}>筛选</Button>
                </div>
            </div>
            
            <main>
                {
                    hometab.length && hometab.map((item, idx) => {
                        return <div key={idx} className="hunting-main">
                            <dl>
                                <dt>
                                    <img src={item.houseImg} alt="" onClick={() => { godetail(item.houseCode) }} />
                                </dt>
                                <dd>
                                    <b className="b1">{item.title}</b>
                                    <p className="b2">{item.desc}</p>
                                    <p className="b3">{item.tags}</p>
                                    <b className="b4">{item.price}元/月</b>
                                </dd>
                            </dl>
                        </div>
                    })
                }
            </main>
            <Popup visible={show} position="right" style={{ height: '100%' }} >
                <div className="btn1">
                    <p>户型</p>
                    <div>
                    <Button type="default">一室</Button>
                    <Button type="default">二室</Button>
                    <Button type="default">三室</Button>
                    <Button type="default">四室</Button>
                    <Button type="default">四室+</Button>
                    </div>
                </div>
                <div className="btn2">
                <p>朝向</p>
                    <div>
                    <Button type="default">东</Button>
                    <Button type="default">西</Button>
                    <Button type="default">南</Button>
                    <Button type="default">北</Button>
                    <Button type="default">东南</Button>
                    <Button type="default">东北</Button>
                    <Button type="default">西南</Button>
                    <Button type="default">西北</Button>
                    </div>
                </div>
                <div className="btn3">
                        <p>楼层</p>
                        <Button type="default">高楼层</Button>
                        <Button type="default">中楼层</Button>
                        <Button type="default">低楼层</Button>
                </div>
                <div className="btn4">
                        <p>房屋亮点</p>
                        <Button type="default">集中供暖</Button>
                        <Button type="default">双卫生间</Button>
                        <Button type="default">近地铁</Button>
                        <Button type="default">随时看房</Button>
                        <Button type="default">精装</Button>
                        <Button type="default">公寓</Button>
                        <Button type="default">独立卫生间</Button>
                        <Button type="default">押一付一</Button>
                        <Button type="default">独立阳台</Button>
                        <Button type="default">月租</Button>
                        <Button type="default">限女生</Button>
                        <Button type="default">限男生</Button>
                        <Button type="default">新上</Button>
                </div>
                <div className="on-btn">
                    <Button className="okone" onClick={() => { ok1() }}>清除</Button><Button className="oktwo" onClick={() => { ok2() }}>确定</Button>
                </div>
            </Popup>
            <footer>
                <Footer />
            </footer>
        </div>                                     
    )
}                
export default hunting